<template>
  <div>
    <NavBar
      title="我的学习"
      right-text="♒"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <Tabs v-model="active" @click="onTabs">
      <Tab v-for="(item,index) in list" :key="index" :title="item.name+`(${item.num})`">
        <div v-if="active==0" class="act">
          <div class="cont" v-for="(item,index) in cont" :key="index">
            <p>{{item.title}}</p>
            <p>{{item.end_play_date|time}} ~~ {{item.created_at|time}}|共{{item.section_num}}课时</p>
          </div>
        </div>
      </Tab>
    </Tabs>
  </div>
</template>

<script>
import { myStudy } from "../../https/https";
import { NavBar, Tab, Tabs } from "vant";
export default {
  components: {
    NavBar,
    Tab,
    Tabs,
  },
  data() {
    return {
      active: 0,
      list: [],
      cont: [],
    };
  },
  mounted() {
    myStudy().then((res) => {
      console.log(res);
      this.list = res.typeNum;
      this.cont = res.courseList;
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push('/date');
    },
    onTabs() {
      if (this.active == 0) {
        myStudy().then((res) => {
          this.cont = res.courseList;
        });
      }
    },
  },
  filters: {
    time(dataStr) {
      var time = new Date(dataStr * 1000);
      function timeAdd0(str) {
        if (str < 10) {
          str = "0" + str;
        }
        return str;
      }
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      return (
        timeAdd0(m) +
        "月" +
        timeAdd0(d) +
        "日 " +
        timeAdd0(h) +
        ":" +
        timeAdd0(mm)
      );
    },
  },
};
</script>

<style scoped>
.cont {
  width: 80%;
  height: 100px;
  border: 2px solid #eeeeee;
  border-radius: 10px;
  margin: 10px auto;
  padding: 20px;
}
.cont > p {
  margin-top: 5px;
}
</style>